<template>
  <div class="m-main-nav" :class="isIEIndex == 2?'text':''">
    <div class="container pr">
      <div class="main-nav-list">
        <router-link target="_blank" to="/" exact active-class="active">
          <span class="text_spna">首页</span>
        </router-link>
        <router-link target="_blank" to="/select" active-class="active">
          <span class="text_spna">产品选型</span>
        </router-link>
        <router-link target="_blank" to="/selector" active-class="active">
          <span class="text_spna">专业选型</span>
        </router-link>
        <router-link target="_blank" to="/brand" active-class="active">
          <span class="text_spna">品牌专区</span>
        </router-link>
        <!-- <router-link target="_blank" to="/sellerHome" active-class="active">
              <span class="text_spna">卖家中心</span>
        </router-link>-->
        <!-- <router-link target="_blank" to="" active-class="active">
              <span class="text_spna">SaaS服务</span>
        </router-link>-->
        <router-link target="_blank" to="/coupon" active-class="active">
          <span class="text_spna">领券中心</span>
        </router-link>
      </div>
      <div id="jy_list" class="m-category-all" @mouseleave="hideNav">
        <!-- :class="top_xx?'xx_top':''" -->
        <a href class="menu-title" @mouseenter="showNav">商品分类</a>
        <ol
          v-if="isShowNav"
          class="nav_jyc category-list xx_top"
          id="J-cateAll"
          style="display: block"
        >
          <li
            class="nav-item"
            v-for="(item, index) in categories"
            :key="index"
            :class="{'active': item.id === activeItem}"
           @mouseleave="onMouseOut"
           v-show="index <= liIndex"
            
          >
            <div class="nav-item-wrap"  v-if="index <= liIndex"  @mouseenter="onMouseOver(item)"
            >
              <a href class="title">
                <!-- <svg-icon icon-class="yibiao" class-name="yibiao" /> -->
                <img :src="item.icon_image" alt style="width:25px;height:25px" />
                {{item.name}}
              </a>
              <p class="subCate">
                <router-link
                  v-if="item.children.length && item.children[0] && item.children[0].name"
                  :to="`/select/?id=${item.children[0].id}&index=${index}&bindex=0`"
                  target="_blank"
                >{{item.children[0].name}}</router-link>
                <router-link
                  v-if="item.children.length && item.children[1] && item.children[0].name"
                  :to="`/select/?id=${item.children[1].id}&index=${index}&bindex=1`"
                  target="_blank"
                >{{item.children[1].name}}</router-link>
                <router-link
                  v-if="item.children.length && item.children[2] && item.children[0].name"
                  :to="`/select/?id=${item.children[2].id}&index=${index}&bindex=2`"
                  target="_blank"
                >{{item.children[2].name}}</router-link>
              </p>
              <svg-icon icon-class="jiantou_r" class-name="jiantou_r" />
            </div>
            <div class="J-category-menu category-menu clear" v-if="item.id === activeItem">
              <div class="bg" style="max-width: 1289px">
                <div class="bg-inner">
                  <!-- <svg-icon icon-class="phone" class-name="phone" /> -->
                  <p class="title" style=" margin-left:20px;margin-bottom:20px">{{item.name}}</p>
                  <!-- <p class="en">MIDDLE-LOW VOLTAGE DISTRIBUTION</p> -->
                </div>
              </div>
              <div class="wrap">
                <div class="container">
                  <div
                    class="pannel-con"
                    v-for="(scataName,aindex) in item.children"
                    :key="scataName.id"
                  >
                    <div class="cate-scd-mod flex">
                      <router-link
                        class="tt cell fixed"
                        :to="`/select?id=${scataName.id}&index=${index}&bindex=${aindex}`"
                        target="_blank"
                      >
                        <em style="width:100px">{{scataName.name}}</em>
                      </router-link>
                      <ul class="cnt cell">
                        <li v-for="child in scataName.children" :key="child.id">
                          <router-link
                            class="link"
                            :to="`/select?id=${child.id}&index=${index}&bindex=${aindex}`"
                            target="_blank"
                          >
                            <span>{{child.name}}</span>
                            <!-- <span class="attachment">附件</span> -->
                          </router-link>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <div class="expand" @click="btnExpand">{{expandName}} <i :class="icons"></i> </div>
        </ol>
      </div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Nav",
  data() {
    return {
      activeItem: "",
      item: {},
      top_cd: "block",
      isexpand:false,
      isIEIndex: "",
      expandName:'展开更多',
      liIndex: 5,
      icons:'el-icon-caret-bottom'
    };
  },
  computed: {
    ...mapGetters(["isShowNav", "pageShowNav", "categories"]),
  },
  created() {
    this.isIE();
  },
  mounted() {
    if (!this.categories) {
      this.getCategory();
    }
    // window.addEventListener('scroll', this.handleScroll)
  },

  methods: {
    ...mapMutations({
      setShowNav: "app/SHOW_NAV",
      setHideNav: "app/HIDE_NAV",
    }),
    ...mapActions({
      getCategory: "category/fetchCategory",
    }),
    onMouseOver(item) {
      this.activeItem = item.id;
    },
    onMouseOut() {
      this.activeItem = "";
    },
    showNav() {
      this.setShowNav();
    },
    hideNav() {
      if (this.pageShowNav) return;
      this.setHideNav();
    },
    //         handleScroll () {
    // var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // if(scrollTop > 200){
    //   this.top_cd = 'none'
    // }else if(scrollTop <= 200){
    //     this.top_cd = 'block'
    // }
    // },
    isIE() {
      // ie?
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        this.isIEIndex = 1;
      } else {
        this.isIEIndex = 2;
      }
    },

    btnExpand(){
      if(this.isexpand){
        this.liIndex = 5
        this.expandName = '展开更多',
        this.icons = 'el-icon-caret-bottom'
      }else{
        this.liIndex = this.categories.length;
        this.expandName = '收起',
        this.icons = 'el-icon-caret-top'
      }
      this.isexpand = !this.isexpand
    }
  },
};
</script>
<style lang="scss" scoped>
.text_spna:hover {
  font-size: 20px;
}
.text_spna {
  transition: all 0.2s ease-in-out;
}
.m-main-nav {
  position: relative;
  min-width: 1200px;
  height: 45px;
  background: rgba(68, 72, 248, 1);
  z-index: 5;
  .pr {
    position: relative;
  }
  .container {
    width: 1200px;
    margin: 0 auto;
    z-index: 0;
    .main-nav-list {
      position: absolute;
      top: 0;
      left: 223px;
      a.active {
        background: #4448f8;
      }
      a {
        float: left;
        display: inline-block;
        height: 45px;
        line-height: 45px;
        padding: 0 32px;
        font-size: 16px;
        color: #fff;
        span {
          position: relative;
        }
      }
    }
    .m-category-all {
      position: absolute;
      float: left;
      width: 223px;
      z-index: 2;
      .menu-title {
        position: relative;
        display: block;
        height: 45px;
        line-height: 45px;
        text-align: center;
        box-sizing: border-box;
        color: #fff;
        font-size: 16px;
        background: rgba(68, 72, 248, 0.72);
      }
      .category-list {
        display: none;
        position: relative;
        padding: 5px 0 6px;
        background: rgba(98, 98, 98, 1);
        box-shadow: 7px 0 7px rgba(102, 102, 102, 0.15);
        background: rgba(0, 0, 0, 0.6) !important;
        .nav-item {
          &:hover,
          &.active {
            .nav-item-wrap {
              position: relative;
              background: #36989a;
              background: rgba(68, 72, 248, 0.6);
            }
          }
        }
        .nav-item {
          padding: 2px 0 10px;
          .nav-item-wrap {
            position: relative;
            width: 250px;
            height: 52px;
            margin: 0 0 0 -13px;
            padding: 7px 0 0 40px;
            box-sizing: border-box;
            color: #fff;
            font-size: 12px;
            text-align: left;
            a {
              color: inherit;
            }
            .title {
              position: relative;
              display: block;
              // padding-left: 34px;
              font-size: 14px;
              .svg-icon {
                font-size: 20px;
                margin-right: 16px;
                color: #fff;
                vertical-align: middle;
                position: absolute;
                left: 0;
              }
            }
            .title:before {
              position: absolute;
              content: "";
              width: 0;
              height: 46px;
              left: 186px;
              top: 50px;
              // background: url(../images/line-menu.png) no-repeat left top;
            }
            .subCate {
              position: relative;
              height: 29px;
              padding: 0 6px 0 0;
              color: rgba(255, 255, 255, 0.6);
              overflow: hidden;
              a {
                display: inline-block;
                padding: 8px 0;
                margin-right: 14px;
              }
              a:hover {
                color: #fff;
                text-decoration: underline;
              }
            }
            .jiantou_r {
              position: absolute;
              right: 0;
              top: 50%;
              margin: -10px 25px 0 0;
              -webkit-transform: scale(0.75);
              -ms-transform: scale(0.75);
              -o-transform: scale(0.75);
              transform: scale(0.75);
              color: #fff;
              font-size: 16px;
            }
          }
          .nav-item-wrap:before {
            position: absolute;
            content: "";
            width: 2px;
            height: 0;
            top: 0;
            left: -8px;
            background: #4448f8;
          }
          .nav-item-wrap:after {
            position: absolute;
            content: "";
            width: 0;
            left: -8px;
            bottom: -7px;
            height: 2px;
            background: #4448f8;
          }
          .category-menu {
            position: relative;
            left: 223px;
            position: absolute;
            height: 112%;
            top: 0px;
            padding: 12% 0 8% 23px;
            z-index: 0;
            box-sizing: border-box;
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
            .bg {
              position: absolute;
              content: "";
              width: 1152px;
              height: 97%;
              left: 39px;
              top: 10px;
              overflow-x: hidden;
              background: rgba(68, 72, 248, 1);
              .bg-inner {
                position: absolute;
                width: 190px;
                left: 959px;
                bottom: 10px;
                padding: 0 4px;
                box-sizing: border-box;
                color: #ffff;
                .svg-icon {
                  display: block;
                  font-size: 30px;
                  padding: 0 0 0 12px;
                }
                .title {
                  display: block;
                  text-align: left;
                  margin: 10px 0 0;
                  padding: 0;
                  font-size: 14px;
                }
                .en {
                  margin: 10px 0 0;
                  line-height: 1.4em;
                  word-break: break-all;
                  font-size: 24px;
                  opacity: 0.6;
                }
              }
            }
            .wrap {
              position: relative;
              height: 470px;
              padding: 14px 7px 14px 5px;
              box-sizing: border-box;
              background: rgba(255, 255, 255, 0.9);
              z-index: 1;
              .container {
                width: 963px;
                height: 100%;
                padding: 0 45px 0 11px;
                box-sizing: border-box;
                overflow-y: auto;
                .pannel-con {
                  .cate-scd-mod {
                    overflow: hidden;
                    border-bottom: 1px solid rgba(66, 72, 248, 0.3);
                    color: #565656;
                    align-items: stretch;
                    .tt {
                      position: relative;
                      width: 115px;
                      margin-right: 22px;
                      padding: 10px;
                      box-sizing: border-box;
                      color: #0f0f0f;
                      font-size: 14px;
                      font-weight: bold;
                      background: rgba(66, 72, 248, 0.3);
                      display: -webkit-box;
                      display: -moz-box;
                      display: -ms-flexbox;
                      display: -webkit-flex;
                      display: flex;
                      -webkit-box-align: center;
                      -moz-box-align: center;
                      -ms-flex-align: center;
                      -webkit-align-items: center;
                      align-items: center;
                      -webkit-box-pack: center;
                      -moz-box-pack: center;
                      -ms-flex-pack: center;
                      -webkit-justify-content: center;
                      justify-content: center;
                      em {
                        display: inline-block;
                        width: 90px;
                        font-weight: bold;
                      }
                    }
                    .cnt {
                      width: 800px\0;
                      padding: 10px 0;
                      overflow: hidden;
                      .link {
                        cursor: pointer;
                      }
                      li {
                        display: inline-block;
                        min-width: 188px;
                        height: 28px;
                        line-height: 28px;
                        color: #181818;
                        font-size: 12px;
                        text-align: left;
                        .attachment {
                          display: inline-block;
                          line-height: 1em;
                          padding: 3px 4px 4px 5px;
                          vertical-align: middle;
                          font-size: 10px;
                          color: #ff0000;
                          margin: 0 0 0 4px;
                          border: 1px solid #ff0000;
                          border-radius: 2px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.isFixed {
  position: fixed;
  top: 0;
}
.text {
  position: sticky;
  position: -webkit-sticky;
  top: 138px;
}
// .menu-title:hover{
//   color: #ff0000 !important;
// }
// .xx_top:hover{
//   display: block !important;
//   background: red !important;
// }
.expand{
  color: #fff;
  text-align: center;
  cursor: pointer;
  padding-bottom: 20px;
  padding-top: 12px;
}
</style>
